<template>
  <el-upload
    ref="upload"
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
    action="#"
    :http-request="request"
  >
    <template #trigger>
      <el-input
        v-model="btnstr"
        :placeholder="$z.$t('请选择')"
        readonly
        type="button"
      />
    </template>
    <div></div>
  </el-upload>
</template>

<script>
  import XLSX from 'xlsx'
  export default {
    name: 'Formexcel',
    props: {
      input: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    emits: ['setexcel'],
    data() {
      return {
        // btnstr: this.$z.$t('请选择'),
        upexcel: [],
      }
    },
    computed: {
      btnstr() {
        if (this.upexcel.length == 0) {
          return this.$z.$t('请选择')
        }

        let mapdata = this.input.mapdata
          ? this.input.mapdata
          : [
              { value: 'gtel', label: this.$z.$t('桩号') },
              { value: 'mc', label: this.$z.$t('桩名') },
            ]
        console.log(mapdata)
        let r = ''
        this.upexcel.forEach((e) => {
          r += e[mapdata[0].value] + ';'
        })
        return r
      },
    },
    created() {},
    mounted() {},
    methods: {
      request(file) {
        // this.$refs.upload.clearFiles()
        console.log(222, file)
        this.exportData(file)
      },
      exportData(event) {
        let f = event.file
        // 用FileReader来读取
        let reader = new FileReader()
        // 重写FileReader上的readAsBinaryString方法
        FileReader.prototype.readAsBinaryString = (f) => {
          let binary = ''
          let wb // 读取完成的数据
          let outdata // 你需要的数据
          let reader = new FileReader()
          reader.onload = () => {
            // 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
            let bytes = new Uint8Array(reader.result)
            let length = bytes.byteLength
            for (let i = 0; i < length; i++) {
              binary += String.fromCharCode(bytes[i])
            }
            // 接下来就是xlsx了，具体可看api
            wb = XLSX.read(binary, {
              type: 'binary',
            })
            outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
            console.log(outdata)
            let mapdata = this.input.mapdata
              ? this.input.mapdata
              : [
                  { value: 'gtel', label: this.$z.$t('桩号') },
                  { value: 'mc', label: this.$z.$t('桩名') },
                ]
            this.upexcel = outdata.map((e) => {
              let r = {}
              mapdata.forEach((f) => {
                r[f.value] = e[f.label]
              })
              return r
            })
            if (mapdata.length != 0) {
              this.upexcel = this.upexcel.filter((e) => {
                return e[mapdata[0].value] && e[mapdata[0].value] != ''
              })
            }

            this.$emit('setexcel', { input: this.input, value: this.upexcel })
          }
          reader.readAsArrayBuffer(f)
        }
        reader.readAsBinaryString(f)
      },
    },
  }
</script>

<style scope>
  .el-upload {
    width: 100%;
  }
</style>
